@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$global-prefix: ngm;
$prefix: (ngm, property-select);
$prefix-color: (#{$prefix}, color);

@function get-unthemable-tokens() {
  @return (
  );
}

@function get-color-tokens() {
  @return (
    container-bg-color: var(--#{$global-prefix}-color-surface-container-high),
    container-ring-offset-color: var(--#{$global-prefix}-color-surface-container),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  @apply flex-1 flex flex-col;
  @include token-utils.create-token-values($prefix, get-token-slots());
}

.ngm-property-select__create-calculation {
  @apply flex justify-center items-center;
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .select-container {
    background-color: var(#{token-utils.get-token-variable(container-bg-color)});
    &:hover {
      --tw-ring-offset-color: var(#{token-utils.get-token-variable(container-ring-offset-color)});
    }
  }
}
.mat-error {
  color: var(--mat-form-field-error-text-color);
}
